<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/5/13
  Time: 9:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        body{
            background: url("${pageContext.request.contextPath}/statics/img/beijing1.jpg");
            background-repeat: no-repeat;
            background-size:100% 100%;

        }
        #father{
            position: relative;
            width: 100%;

        }
        #father #diyege{
            position: absolute;
            left: 720px;
            top: 300px;
        }
        #father #diyege .ziTi{
            font-size: 20px;
            font-weight: bold;
            color: saddlebrown;
        }

        #father #diyege td{
            height: 45px;
            line-height: 45px;
        }
        #father #diyege .daxiao{
            width: 300px;
            height: 35px;
        }
        #button,#reset{
            width: 60px;
            height: 30px;
        }

    </style>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-1.8.3.min.js">




    </script>
    <script type="text/javascript">
        $(function () {

          $("#button").click(function () {
            if(feikong()){
                 var uName=$("#uName").val();
                 var uCardId= $("#uCardId").val();
                 var uPhone= $("#uPhone").val();
                 var uPassword= $("#uPassword").val();
                 $.post("${pageContext.request.contextPath}/add",{uName:uName,uCardId:uCardId,uPhone:uPhone,uPassword:uPassword},function (result) {
                 if(result==1){
                   if(confirm("注册成功，是否去登录!")){
                      location.href="${pageContext.request.contextPath}/doLogin";
                   }

                 }
                },"JSON")

            }

          });





            $("#uCardId").blur(function () {
                $("#span1").html("");
             var uCardId=  $("#uCardId").val();

                if(uCardId!=''){
                    if(uCardId.length!=18){
                        $("#uCardId").select();
                       $("#span1").html("身份证位数不正确!");
                       $("#span1").css("color","red");
                    }




                }

            });

            $("#uPhone").blur(function () {
                $("#span2").html("");
                var zhe=/^1[34578]\d{9}$/;
                var uPhone=  $("#uPhone").val();
                if(uPhone!=""){
                    if(!zhe.test(uPhone)){
                        $("#span2").html("电话号码格式不正确!");
                        $("#span2").css("color","red");
                        $("#uPhone").select();
                    }else{
                        $.post("${pageContext.request.contextPath}/checkreg",{uPhone:uPhone},function (result) {
                            if(result){
                                $("#span2").html("该电话号码已注册");
                                $("#span2").css("color","red");
                                $("#uPhone").select();
                            }
                        },"JSON");

                    }
                }

            });

            $("#uPassword1").blur(function () {
                $("#span3").html("");

                var uPassword1=  $("#uPassword1").val();
                if(uPassword1!=''){
                  if(uPassword1.length<6){
                      $("#span3").html("密码必须是6位以上!");
                      $("#span3").css("color","red");
                      $("#uPassword1").select();
                  }
                }

            });

            $("#uPassword").blur(function () {
                $("#span4").html("");
                var uPassword=  $("#uPassword").val();
                var uPassword1=  $("#uPassword1").val();
                if(uPassword!=''){
                    if(uPassword==uPassword1){
                    }else {
                        $("#span4").html("两次密码不一致!");
                        $("#span4").css("color","red");
                        $("#uPassword1").focus();
                        $("#uPassword").val('');
                        $("#uPassword1").val('');
                    }
                }

            })

            $("#uName").blur(function () {
                $("#span5").html("");
            });
        })






        function feikong() {
            var uName = $("#uName").val();
            var uCardId=$("#uCardId").val();
            var uPhone=$("#uPhone").val();
            var uPassword1=$("#uPassword1").val();
            var uPassword=$("#uPassword").val();
            if(uName==""){
                $("#span5").html("用户名不能为空!");
                $("#span5").css("color","red");
                return false;
            }else if(uCardId==""){
                $("#span1").html("身份证号不能为空!");
                $("#span1").css("color","red");
                return false;
            }else if(uPhone==""){
                $("#span2").html("电话号码不能为空!");
                $("#span2").css("color","red");
                return false;
            }else if(uPassword1==""){
                $("#span3").html("密码不能为空!");
                $("#span3").css("color","red");
                return false;
            }else if(uPassword==""){
                $("#span4").html("请再次输入密码!");
                $("#span4").css("color","red");
                return false;
            }
             return true;


        }





    </script>
</head>
<body>
 <div id="father">
      <div id="diyege">
          <form   action="javaScript:void(0);" method="post" id="form">
          <table align="center" cellpadding="0" cellspacing="0" width="800"  >
              <tr>
                  <td><span class="ziTi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名:</span><input type="text" name="uName" class="daxiao" id="uName" /><span id="span5"></span></td>
              </tr>
              <tr>
                  <td><span class="ziTi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;身份证号码:</span><input type="text" name="uCardId" class="daxiao"id="uCardId" /><span id="span1"></span></td>
              </tr>
              <tr>
                  <td><span class="ziTi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话号码:</span><input type="text" name="uPhone" class="daxiao" id="uPhone" /><span id="span2"></span></td>
              </tr>
              <tr>
                  <td><span class="ziTi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码:</span><input type="password"  class="daxiao" id="uPassword1" /><span id="span3"></span></td>
              </tr>
              <tr>
                  <td><span class="ziTi">请再次输入密码:</span><input type="password" name="uPassword" class="daxiao" id="uPassword"/><span id="span4"></span></td>
              </tr>
              <tr>
                  <td><P style="margin-left: 200px"><input type="button" value="提交" id="button" /><input type="reset" value="清空" style="margin-left: 20px" id="reset" /></P></td>
              </tr>
          </table>
          </form>
      </div>
 </div>

</body>
</html>
